@-moz-document url-prefix() {
  .@{prefix}-components-tree-node {
    padding-right: 11px;
  }
}
.@{prefix}-components-tree {
  width: 100%;
  height: 100%;
  user-select: none;
  position: relative;
  &-search-value {
    background: @primary-color;
    color: @background-color;
  }
    &-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  & > div > div {
    overflow: scroll !important;
  }
  &-hiddenX {
    & > div > div {
      overflow-x: hidden !important;
    }
  }
  &-node {
    outline: none;
    line-height: 30px;
    white-space: nowrap;
    &-drag {
      &-icon {
        cursor: move;
      }
      &-enter {
        &-peer {
          &-after {
            .@{prefix}-components-tree-node-drag-line-after {
              border-top: 3px dashed @primary-color;
            }
          }
          &-before {
            .@{prefix}-components-tree-node-drag-line-before {
              border-top: 3px dashed @primary-color;
            }
          }
        }
        &-sub {
          .@{prefix}-components-tree-node-drag-content {
            background: @primary-color !important;
            & > span, i {
              color: @background-color;
              background: @primary-color !important;
            }
          }
        }
      }
      &-line {
        &-before {
          position: absolute;
          left: 0;
          top: 0;
          display: inline-block;
          width: 100%;
          height: 3px;
          z-index: 1;
        }
        &-after {
          position: absolute;
          left: 0;
          bottom: 0;
          display: inline-block;
          width: 100%;
          height: 3px;
          z-index: 1;
        }
      }
      &-content {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        position: relative;
        &-expand {
          &-left {
            display: flex;
            flex-direction: row;
            align-items: center;
            i {
              color: @second-font-color;
              text-align: center;
              width: 14px;
              margin-right: 3px;
              transition: transform 0.3s;
            }
          }
          &-right {
            float: right;
            i {
              color: @second-font-color;
              text-align: center;
              width: 14px;
              margin-right: 3px;
              transition: transform 0.3s;
            }
          }
        }
        &-data {
          display: inline-block;
          height: 100%;
          &-check {
            margin-right: 5px;
          }
          &-label {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
          }
          &-icon {
            color: @second-font-color;
            margin-right: 5px;
          }
        }
        &-drag {
          position: absolute;
          top: 7px;
          right: 0;
          display: inline-flex;
          align-items: center;
          height: calc(100% - 14px);
          //width: 45px;
          text-align: right;
          span + i {
            margin-left: 3px;
          }
          background: @background-color;
          i {
            color: @third-font-color;
            transition: transform 0.3s;
            margin-right: 3px;
          }
        }
      }
    }
    &-selected {
      background:@second-primary-color;
      color: @primary-color;
      i {
        color: @primary-color !important;
      }
      span:not(.@{prefix}-components-tree-search-value) {
        background: @second-primary-color !important;
        color: @primary-color;
      }
    }
    &-more {
      color: @primary-color;
      font-size: 12px;
      text-align: center;
    }
  }
  &-scroll {
    pointer-events: none;
    display: none;
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    background: linear-gradient(to bottom, transparent, @background-color);
  }
}
